<template>
  <!-- 保持原有模板不变 -->
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back" @click="navigateBack">
        <uni-icons type="left" size="20" color="#fff"></uni-icons>
      </view>
      <view class="title">添加成功</view>
      <view class="right">
        <uni-icons type="more-filled" size="20" color="#fff"></uni-icons>
      </view>
    </view>
    
    <!-- 成功提示 -->
    <view class="success-content">
      <view class="success-icon">
        <uni-icons type="checkmarkempty" size="60" color="#007AFF"></uni-icons>
      </view>
      <view class="success-text">添加成功</view>
      
      <!-- 返回按钮 -->
      <button class="back-btn" @click="navigateBack">返回</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const userId = ref('');

// 页面加载
onLoad((options) => {
	if (options.id) {
		userId.value = options.id;
	}
});

// 组合式 API 函数
const navigateBack = () => {
	uni.navigateTo({
		url: `/pages/my/mycar/MyCars?id=${userId.value}`
	});
}
</script>

<style lang="scss" scoped>
/* 保持原有样式不变 */
.container {
  min-height: 100vh;
  background-color: #fff;
}

.nav-bar {
  display: flex;
  align-items: center;
  height: 44px;
  background-color: #007AFF;
  color: #fff;
  padding: 0 15px;
  
  .back {
    width: 44px;
  }
  
  .title {
    flex: 1;
    text-align: center;
    font-size: 18px;
  }
  
  .right {
    width: 44px;
    text-align: right;
  }
}

.success-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100px;
  
  .success-icon {
    width: 100px;
    height: 100px;
    background-color: rgba(0, 122, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }
  
  .success-text {
    font-size: 18px;
    color: #333;
    margin-bottom: 40px;
  }
  
  .back-btn {
    width: 200px;
    height: 44px;
    line-height: 44px;
    background-color: #007AFF;
    color: #fff;
    border-radius: 22px;
    font-size: 16px;
    
    &:active {
      opacity: 0.8;
    }
  }
}
</style>